import React, { useState } from "react";
import { Input } from 'antd';
import { FlowchartFormWrapper } from '@antv/xflow';

import type { IFlowchartFormWrapperProps } from '@antv/xflow-extension/es/flowchart-editor-panel/interface';

const InputComponent = props => {
    const { config, plugin = {}, controlSchema } = props
    const { updateNode, updateEdge, updateGroup } = plugin
    const { label } = controlSchema;
    const [labelValue, setLabelValue] = useState(label);
    const onLabelChange = e => {
        const newValue = e.target.value;
        updateNode({
            label: newValue,
        })
        setLabelValue(newValue)
    }
    return <Input value={labelValue} onChange={onLabelChange} />
}

const RenameService = (props: IFlowchartFormWrapperProps | any) => {
    return (
        <FlowchartFormWrapper {...props}>
            {
                (config, plugin) =>
                    <InputComponent
                        {...props}
                        plugin={plugin}
                        config={config}
                    />
            }
        </FlowchartFormWrapper>
    )
}

export default RenameService